<template>
<!--  <el-backtop :right="100" :bottom="100" />-->
  <el-backtop :bottom="100" style="width: 54px;height: 54px;">
    <div
        style="
        padding-top: 18px;
        height: 75%;
        width: 100%;
        background-color: #00c792;
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
      "
    >
      <img src="../assets/向上箭头.png" style="width: 30px;height: 25px;">
    </div>
  </el-backtop>
  <div class="fixed-box" @click="toQuestion">
    <img src="../assets/预问诊.png" style="width: 50px;height: 50px"/>
  </div>
<!--  丁香医生-应用导航-->
  <div class="homeApp">
<!--    丁香医生LOGO-->
    <img class="homeLogo" src="../assets/Logo/homeLogo.png" @click="router.push('/')">
<!--    搜索框-->
    <el-input
        v-model="input1"
        placeholder="文章/疾病/医生/药品/医院"
        :prefix-icon="Search"
        class="homeSearch"
    >
      <template #append>
        <el-button style="width: 125px;height:100%;color:#ffffff;background-color: #00c792;border-radius: 0;box-shadow: none !important;border: #00c792;">搜索</el-button>
      </template>
    </el-input>
    <el-row class="leftNav">
      <el-col :span="6" @click="router.push('/department')">
        <el-card shadow="hover" class="leftCard">
          <el-text class="leftBigText" size="large">问医生</el-text>
          <br>
          <el-text class="leftSmallText">三甲主治医生</el-text>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="2" class="rightNav">
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">查疾病</el-text>
          <br>
          <el-text class="rightSmallText">权威疾病百科</el-text>
          <img class="rightImage" src="../assets/home/select_1.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">查药品</el-text>
          <br>
          <el-text class="rightSmallText">药品信息大全</el-text>
          <img class="rightImage" src="../assets/home/select_2.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="router.push('/hospital_list')">
          <el-text class="rightBigText" size="large">查医院</el-text>
          <br>
          <el-text class="rightSmallText">国内医院信息查询</el-text>
          <img class="rightImage" src="../assets/home/select_3.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">查检查/手术</el-text>
          <br>
          <el-text class="rightSmallText">检查与手术专业百科</el-text>
          <img class="rightImage" src="../assets/home/select_4.png">
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="2" class="rightNav2">
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">查疫苗</el-text>
          <br>
          <el-text class="rightSmallText">疫苗接种与禁忌</el-text>
          <img class="rightImage" src="../assets/home/select_5.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">急救指南</el-text>
          <br>
          <el-text class="rightSmallText">急救知识百科查询</el-text>
          <img class="rightImage" src="../assets/home/select_6.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">测一测</el-text>
          <br>
          <el-text class="rightSmallText">1分钟了解自己</el-text>
          <img class="rightImage" src="../assets/home/select_7.png">
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="rightCard" @click="toError">
          <el-text class="rightBigText" size="large">科普视频</el-text>
          <br>
          <el-text class="rightSmallText">生活辟谣与科普</el-text>
          <img class="rightImage" src="../assets/home/select_8.png">
        </el-card>
      </el-col>
    </el-row>
  </div>
<!--  丁香医生-功能分类导航-->
  <div class="funcNav">
    <el-card :body-style="{ display:'flex',padding:'0px !important'}">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane name="first">
          <template #label>
            <div class="custom-tabs-label">
              <img v-if="activeName == 'first'" src="../assets/home/大众_select.png" style="width: 24px;height: 24px;float: left;"/>
              <img v-else src="../assets/home/大众.png" style="width: 24px;height: 24px;float: left;"/>
              <el-text v-if="activeName == 'first'" style="padding-left:10px;height: 25px;font-size: 20px;float: right;color: #00c792;">大众健康</el-text>
              <el-text v-else style="padding-left:10px;height: 25px;font-size: 20px;float: right;">大众健康</el-text>
            </div>
          </template>
          <!--大众健康-分类-->
          <ul>
            <li v-for="(item, key) in health.health_category_List" :key="key">
              <el-button v-if="health.current_category==item.id" style="background-color:#0dc98f;color:white;" class="categoryButton" @click="health.current_category=item.id">{{ item.name }}</el-button>
              <el-button v-else class="categoryButton" @click="health.current_category=item.id">{{ item.name }}</el-button>
            </li>
          </ul>
          <ul class="diseaseNav">
            <li v-for="(item, key) in health.health_disease_List" :key="key">
              <img src="../assets/home/实心点.png" style="width: 14px;height: 14px;">
              <a href="" @click.prevent="health.current_disease=item.id" class="diseaseFont">{{ item.name }}</a>
            </li>
          </ul>
          <br>
        </el-tab-pane>
        <el-tab-pane name="second">
          <template #label>
            <div class="custom-tabs-label">
              <img v-if="activeName == 'second'" src="../assets/home/生活_select.png" style="width: 24px;height: 24px;float: left;"/>
              <img v-else src="../assets/home/生活.png" style="width: 24px;height: 24px;float: left;"/>
              <el-text v-if="activeName == 'second'" style="padding-left:10px;height: 25px;font-size: 20px;float: right;color: #00c792;">生活手册</el-text>
              <el-text v-else style="padding-left:10px;height: 25px;font-size: 20px;float: right;">生活手册</el-text>
            </div>
          </template>
          <!--生活手册-分类-->
          <ul>
            <li v-for="(item, key) in life.life_category_List" :key="key">
              <el-button v-if="life.current_category==item.id" style="background-color:#0dc98f;color:white;" class="categoryButton" @click="life.current_category=item.id">{{ item.name }}</el-button>
              <el-button v-else class="categoryButton" @click="life.current_category=item.id">{{ item.name }}</el-button>
            </li>
          </ul>
          <ul class="diseaseNav">
            <li v-for="(item, key) in life.life_disease_List" :key="key">
              <img src="../assets/home/实心点.png" style="width: 14px;height: 14px;">
              <a href="" @click.prevent="life.current_disease=item.id" class="diseaseFont">{{ item.name }}</a>
            </li>
          </ul>
          <br>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
<!--  科室Department医生doctor导航-->
  <div class="DepartmentNav">
    <el-card class="DepartmentCard">
      <ol class="DepartmentOl">
        <li v-for="(item,key) in department.department_list" :key="key">
          <a v-if="doctor.department_id==item.id" href="" class="DepartmentTextEd" @click.prevent="doctor.department_id=item.id">{{ item.name }}</a>
          <a v-else href="" class="DepartmentText" @click.prevent="doctor.department_id=item.id">{{ item.name }}</a>
        </li>
      </ol>
      <span><a href="" class="departmentRight" @click.prevent="router.push('/department')">全部科室</a></span>
      <el-divider/>
      <el-card shadow="hover" class="doctorCard" v-for="(item, key) in doctor.doctor_list" :key="key" @click="toDoctor(item.id)">
        <el-avatar :size="80" :src="item.avatar" alt="../assets/avatar/default.jpg" />
        <div style="margin-top: 16px;">
          <span><el-text style="">{{ item.name }}</el-text></span>
          <span><el-text style="font-size: 16px;color: #444c57;">&nbsp;{{ item.title }}</el-text></span>
        </div>
        <div style="margin-top: 8px;">
          <span><el-text style="
                font-size: 13px;
                color: #828993;
                line-height: 1.23;
                text-align: center;
                display: -webkit-box;
                /*word-break: break-all;*/
                overflow: hidden;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                white-space: normal !important;">{{ item.hospital }}</el-text></span>
        </div>
        <div style="margin-top: 8px;">
          <span><el-text style="font-size: 13px;color: #828993;line-height: 1.23;max-width: 80%;">{{ item.department }}</el-text></span>
        </div>
        <div style="margin-top: 16px;">
          <span>
            <img src="../assets/星星.png" style="width: 14px;height: 13px;">
            <el-text style="font-size: 13px;margin-left: 4px;color: #ffb54c;line-height: 1.23;">{{ item.star }}</el-text>
          </span>
          <el-divider direction="vertical" style="margin-left: 20px;margin-right: 20px;" />
          <span>
            <el-text style="font-size: 13px;line-height: 1.23;color: #828993;">{{ item.answer }}月回答</el-text>
          </span>
        </div>
        <div style="margin-top: 24px;">
          <span>
            <el-text
                style="font-size: 13px;
                color: #818993;
                margin-top: 24px;
                text-align: center;
                min-height: 44px;
                line-height: 1.54;
                display: -webkit-box;
                /*word-break: break-all;*/
                overflow: hidden;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                white-space: normal !important;">
              {{ item.profile }}
            </el-text>
          </span>
        </div>
        <div style="margin-top: 24px;">
          <span>
            <el-button
                style="
                width: 120px;
                height: 38px;
                min-height: 38px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 500;
                color: #fff;
                background-color: #00c792;">
              问医生￥{{ item.price }}
            </el-button>
          </span>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import health from "../api/health.js";
import life from "../api/life.js";
import department from "../api/Department.js";
import doctor from "../api/doctor.js";
import settings from "../settings.js";
import { ElMessage } from "element-plus";
import {useRouter} from "vue-router";
const router = useRouter()
import { Search, StarFilled } from '@element-plus/icons-vue'

let input1 = ref("")


const activeName = ref('first')

health.get_health_category()
life.get_life_category()
department.get_department_list()
doctor.get_doctor_list()

// 监听切换大众健康-健康分类，重新获取对应大众健康-健康分类下的所有疾病分类信息
watch(
    ()=> health.current_category,
    ()=>{
      // 重置当前默认选中的健康分类
      health.current_disease = 0
      health.get_health_disease();
    }
)

// 监听切换不同的大众健康-疾病分类
watch(
    ()=> health.current_disease,
    ()=>{
      // 跳转到详情页面
      toHealthDetail(health.current_category,health.current_disease,'1');
    }
)

// 监听切换不同的生活手册-生活分类，重新获取对应生活手册-生活分类下的所有生活技巧信息
watch(
    ()=> life.current_category,
    ()=>{
      // 重置当前默认选中的课程分类
      life.current_disease = 0
      life.get_life_disease();
    }
)

// 监听切换不同的生活手册-生活技巧
watch(
    ()=> life.current_disease,
    ()=>{
      // 跳转到详情页面
      toHealthDetail(life.current_category,life.current_disease,'2');
    }
)

watch(
    ()=> doctor.department_id,
    ()=>{
      doctor.get_doctor_list()
    }
)

const toHealthDetail=(category_id, disease_id, type_id)=>{
  router.push(`/detail?category_id=${category_id}&disease_id=${disease_id}&type_id=${type_id}`)
}

onMounted(()=>{
  health.current_category = 1
  health.get_health_disease();
  life.current_category = 1
  life.get_life_disease();
})

let ImageUrl = ref(`${settings.host}uploads/avatar/2024/default.jpg`)

const toDoctor=(id)=>{
  doctor.doctor_id = id
  router.push(`/doctor?id=${id}`)
}

const toError=()=>{
  ElMessage.error("该功能暂未开放！")
}

const toQuestion=()=>{
  router.push('/ai_question')
}

</script>

<style scoped>
.homeApp{
  width: 100%;
  height: 510px;
  background-image: url('../assets/home/beijing.png');
  background-size: cover; /* 背景图片覆盖整个div区域 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.homeLogo{
  position: absolute;
  top: 23%;
  left: 50%;
  display:flex;
  width: 12%; /* 图片宽度填满容器 */
  height: 12%; /* 图片高度填满容器 */
  object-fit: contain; /* 图片等比缩放 */
  transform: translate(-50%, -50%);
}

.homeSearch{
  position: absolute;
  top: 35%;
  left: 50%;
  display:flex;
  width: 44%;
  height: 7%;
  transform: translate(-50%, -50%);
}

.homeSearch >>> .el-input__wrapper {
  border-radius: 0;
  box-shadow: none !important;
}

.leftNav{
  position: absolute;
  top: 54.5%;
  left: 18.8%;
  display:flex;
  width: 15.5%;
  height: 12%;
  transform: translate(-50%, -50%);
}

.rightCard{
  width: 225px;
  height: 123px;
}

.leftCard{
  width: 225px;
  height: 261px;
  background-image: url("../assets/home/homeLeftNav.png");
  background-size: cover; /* 背景图片覆盖整个div区域 */
  background-position: center; /* 背景图片居中显示 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}

.rightNav{
  position: absolute;
  top: 54.5%;
  left: 57.5%;
  display:flex;
  width: 62%;
  height: 12%;
  transform: translate(-50%, -50%);
}

.rightNav2{
  position: absolute;
  top: 74%;
  left: 57.5%;
  display:flex;
  width: 62%;
  height: 12%;
  transform: translate(-50%, -50%);
}

.rightImage{
  width: 55px;
  height: 55px;
  display: block;
  float: right;
}

.rightBigText{
  position: absolute;
  top: 50%;
  display:flex;
  font-size: 20px;
  width: 110px;
  color: black;
}

.rightSmallText{
  position: absolute;
  top: 85%;
  display:flex;
  font-size: 12px;
  width: 110px;
  color: black;
}


.leftBigText{
  position: absolute;
  top: 50%;
  display:flex;
  font-size: 28px;
  width: 110px;
  color: black;
}

.leftSmallText{
  position: absolute;
  top: 100%;
  display:flex;
  font-size: 12px;
  width: 110px;
  color: black;
}

.funcNav{
  margin-top: 111px;
  width: 77%;
  margin-left: 11%;
}

.demo-tabs >>> .el-tabs__content {
  padding-left: 32px;
  padding-right: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  width: 1100px;
  margin: auto;
  background-color: white;
}

.demo-tabs >>> .el-tabs__nav-wrap::after {
  position: static !important;
}

.demo-tabs >>> .el-tabs__active-bar {
  background-color: rgba(0, 0, 0, 0) !important;
  width: 15px!important;
  margin-left: calc((70% / 2 - 15px) / 2);
  height: 4px;
  border-radius: 4px;
}

.demo-tabs >>> .el-tabs__item {
  text-align: center;
  width: 550px;
  height: 100px;
  border: 0;
}

.demo-tabs >>> .is-active {
  color: #00c792;
}


.custom-tabs-label{
  height: 50px;
}

ul{
  list-style-type: none; /* 去掉默认的圆点 */
  padding: 0; /* 去掉默认的内边距 */
  text-align: justify; /* 两端对齐 */
}
li {
  display: inline-block; /* 让列表项横向排列 */
  margin-right: 20px; /* 为列表项之间添加一些间距 */
  width: calc(10% - 10px); /* 每个列表项的宽度，减去间距 */
  text-align: center; /* 使内容居中 */
  margin-top: 0;
}
/*li:after {*/
/*  content: ''; !* 添加伪元素 *!*/
/*  display: inline-block;*/
/*  width: 100%; !* 伪元素的宽度 *!*/
/*  height: 0;*/
/*}*/

.categoryButton{
  width: 100px;
  height: 25px;
  background-color: #f2f3f5;
  color: #5b626b;
}

.categoryButton:hover{
  width: 100px;
  height: 25px;
  background-color: #00c792;
  color: white;
}


.categoryButton:checked{
  width: 100px;
  height: 25px;
  background-color: #00c792;
  color: white;
}


.diseaseNav >>> li {
  display: inline-block; /* 让列表项横向排列 */
  margin-right: 20px; /* 为列表项之间添加一些间距 */
  width: calc(13% - 13px); /* 每个列表项的宽度，减去间距 */
  text-align: center; /* 使内容居中 */
}

.diseaseFont{
  text-decoration: none;
  font-size: 14px;
  color: #5b626b;
  cursor: pointer;
  font-weight: initial;
}
.diseaseFont:hover{
  text-decoration: underline #0dc98f;
  color: #0dc98f;
}

.DepartmentNav{
  margin-top: 20px;
  width: 77%;
  margin-left: 11%;
}

.DepartmentCard{
  height: 554px;
}
.DepartmentOl{
  margin: 0;
  padding: 0;
  max-width: 990px;
  height: 24px;
  word-break: break-all;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: normal !important;
  display: flex;
  float: left;
}

.DepartmentOl >>> li{
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #252a33;
  margin-right: 52px;
  white-space: nowrap;
}

.DepartmentText{
  text-decoration: none;
  font-size: 20px;
  color: #252a33;
  cursor: pointer;
  font-weight: initial;
}

.DepartmentText:hover{
  text-decoration: underline #00c792;
  color: #00c792;
}

.DepartmentTextEd{
  text-decoration: none;
  font-size: 20px;
  color: #00c792;
  cursor: pointer;
  font-weight: initial;
}

.DepartmentTextEd:hover{
  text-decoration: underline #00c792;
  color: #00c792;
}

.departmentRight{
  text-decoration: none;
  font-size: 16px;
  color: #00c792;
  cursor: pointer;
  font-weight: initial;
  margin-left: 50px;
}
.departmentRight:hover{
  text-decoration: underline #00c792;
}

.doctorCard{
  width: 220px;
  height: 360px;
  padding: 32px 20px 32px 20px;
  margin-right: 20px;
  float: left;
  text-align: center;
}

.fixed-box {
  position: fixed;
  bottom: 200px; /* 距离顶部50px */
  right: 50px; /* 距离左侧50px */
  width: 50px; /* 宽度100px */
  height: 50px; /* 高度100px */
  background-color: rgba(0, 0, 0, 0); /* 背景颜色 */
  border-radius: 50px;
  color: white; /* 文字颜色 */
  text-align: center; /* 文字居中 */
}
</style>


